<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>promotion management</el-breadcrumb-item>
      <el-breadcrumb-item>promotion list</el-breadcrumb-item>
      <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
    </el-breadcrumb>
    <!--白色内容区域-->
    <div class="page_content">
      <div class="flex">
        <div class="input_box">
          <el-input
              v-model="keywords"
              placeholder="Please input"
              class="input-with-select"
          >
            <template #append>
              <el-button @click="searchUsers">
                <el-icon>
                  <Search/>
                </el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
        <el-button type="primary" @click="addUser">新增</el-button>
      </div>
    </div>
    <div>
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="nickName" label="昵称" width="180" />
        <el-table-column prop="userName" label="用户名" width="180" />
        <el-table-column prop="email" label="邮箱" width="180"/>
        <el-table-column prop="email" label="邮箱" width="180"/>
        <el-table-column prop="stateId" label="状态" width="120">
            <template #default="scope">
              <el-switch v-model="scope.row.stateId" style="--el-switch-on-color:#13ce66;--el-switch-off-color: #ff4949;"/>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        v-model="adduserDialogFormVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
    >
      <span>This is a message</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="adduserDialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="adduserDialogFormVisible = false">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
  <h1>{{ name }}</h1>
</template>
<script>
import {ArrowRight, Search} from "@element-plus/icons-vue";
import {reactive, toRefs} from "vue";
import {userListApi} from "@/util/request";

export default {
  components: {ArrowRight, Search},
  setup() {
    const data = reactive({
      userList:[],
      name: "users",
      keywords: "",
      searchParam: {
        query: "",
        pageNum: 1,
        pageSize: 10
      },
      adduserDialogFormVisible:false
    })
    const searchUsers = () => {
      console.log("searchUsers")
      userListApi().then(res => {
        if (res) {
          data.userList = res.rows;
          console.log("用户数据：" + res)
        }
      })
    }
    const addUser = () => {
      data.adduserDialogFormVisible=true;
      console.log("addUser")
    }
    return {...toRefs(data), searchUsers, addUser,}
  }
}
</script>
<style>
.input_box {
  margin-right: 15px;
}
</style>